<!--
 * @Author: coocase
 * @Date: 2021-04-11 14:18:14
 * @LastEditTime: 2021-05-11 21:16:58
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\account\users.vue
-->
<template>
  <div>
    <pageHeader :menuName="menu"></pageHeader>
    <Table border :columns="columns" :data="pages.pageData">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ index }" slot="action">
        <Button type="error" size="small" @click="remove(index)">Delete</Button>
      </template>
    </Table>
    <!-- <Page
      :total="pages.pageTotal"
      :page-size="pages.pageSize"
      @on-change="pageChange"
      :current="pages.pageNum"
    /> -->
  </div>
</template>

<script>
import PageHeader from "./pageHeader";
export default {
  name: "users",
  props: ["datas"],
  data() {
    return {
      //绑定的表单字段
      columns: [
        {
          title: "用户名",
          slot: "name",
        },
        {
          title: "电话号码",
          key: "phoneNumber",
        },
        {
          title: "身份证号",
          key: "id",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      //初始化信息
      pages: {
        pageNum: 1,
        pageTotal: 10,
        pageSize: 5,
        pageData: [
          {
            name: "张三",
            phoneNumber: "13888888888",
            id: "123456789012345111",
            action: "删除",
          },
          {
            name: "李四",
            phoneNumber: "13999999222",
            id: "123456789012345333",
            action: "删除",
          },
          {
            name: "王五",
            phoneNumber: "13777777777",
            id: "123456789012335111",
            action: "删除",
          },
          {
            name: "赵六",
            phoneNumber: "13666666666",
            id: "123456789012345000",
            action: "删除",
          },
        ],
      },
      menu: "users",
    };
  },
  components: {
    PageHeader,
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.pageData[index].name}<br>PhoneNumber：${this.pageData[index].phoneNumber}<br>Id：${this.pageData[index].id}`,
      });
    },
    remove(index) {
      this.pages.pageData.splice(index, 1);
    },
    //获得后台信息并初始化
    // pageInit() {
    //   this.pages.pageNum = 1;
    //   (this.pages.pageTotal = this.datas.length * 5),
    //     // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
    //     (this.pages.pageData = Array.from(this.datas[0].datas));
    // },
    //页码改变后信息改变
    // pageChange(i) {
    //   this.pages.pageNum = i;
    //   this.pages.pageSize = this.datas[i - 1].datas.length;
    //   this.pages.pageData = Array.from(this.datas[i - 1].datas);
    // },
  },
  created: function () {},
  mounted: function () {
    // console.log("mounted");
    // this.pageInit();
  },
};
</script>

<style>
</style>